<template>
    <div class="nav" :style="{height:getH()+'px'}">
        <div class="nav-item" v-for="(item,id) in nav" :key="item.id" @click="setBac(id)" :class="{bacStyle:current==id}" >
            <img src="" alt="">
            <h3>{{item.name}}</h3>
        </div>
        <div class="other"></div>
    </div>
</template>

<script>
    export default {
        name: "Tab",
        components:{},
        data(){
            return{
                nav:[
                    {
                        id:0,
                        path:'/Home/Inoculate',
                        name:'接种管理'
                    },
                    {
                        id:1,
                        path:'/Home/Vaccine',
                        name:'疫苗管理'
                    }
                ],
                current:0,
            }
        },
        methods:{
            setBac(id){
                this.current=id
                // this.$router.push(this.nav[id].paths)
                this.nav.forEach((item)=>{
                    if(item.id==id){
                        this.$router.push(item.path)
                    }else{
                        return "路由错误"
                    }
                })
                console.log(this.current)
            },
            getH(){
                return (document.body.offsetHeight-60);
            }
        },
        mounted(){
            this.setBac(0)
        }
    }
</script>

<style scoped lang="less">
    .nav{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        color: #aaa;
        width: 150px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        .other{
            flex: 1;
            background-color: rgb(61,68,94);
        }
        .nav-item{
            display: flex;
            justify-content: center;
            cursor:pointer;
            background-color: rgb(61,68,94);
            h3{
                margin-left: 10px;
            }

        }
    }
    .bacStyle{
        background-color: rgba(61,68,94,0.3)!important;
        color: white;
    }
</style>
